<template>
  <div>
    账号：
    <input type="text" v-model="username" />
    密码：
    <input type="text" v-model="password" />
    <button @click="handleLoginClick" v-my-directive>提交</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 在setup语法中接收props
const props = defineProps({
  foo: String,
})
const vMyDirective = {
  beforeMount: (el: any) => {
    // 在元素上做些操作
    console.log(el, 'el')
  },
}
const state = reactive({})

const username = ref<string>('')
const password = ref<string>('')

const handleLoginClick = () => {
  console.log('username:', username.value, 'password:', password.value)
}
</script>
